<template>
  <div class="main">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">支持与服务</span>
        <div class="size-box__column"></div>
        <div class="size-box__column"></div>
        <span class="banner-main__subtitle" style="line-height:28px">
          铝工业互联网为您提供多类型多渠道的服务支持以满足不同用户的支持需求。<br />
          若您遇到使用问题，可以通过工单、热线、支持计划、专项服务等渠道联系我们。<br />
        </span>
        <!-- <span class="banner-main__btn">服务咨询</span> -->
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h3 class="title" style="padding: 24px 0 48px 0">售后支持</h3>
        <div class="wrapper">
          <div class="ant-row" style="margin-left: -6.25px; margin-right: -6.25px;">
            <div class="ant-col" style="padding-left: 6.25px; padding-right: 6.25px;">
              <div class="ant-box">
                <img class="box-img" src="@/assets/leaveword.png"/>
                <div class="box-content" style="padding: 24px 32px 48px">
                  <h1>留言支持</h1>
                  <p class="title">LEAVEWORD</p>
                  <p class="desc">为您提供7*24小时留言服务，客服将及时处理您的问题。</p>
                  <div class="size-box__column"></div>
                  <div class="size-box__column"></div>
                  <el-button @click="showDialog">提交留言</el-button>
                </div>
              </div>
            </div>
            <div class="ant-col" style="padding-left: 6.25px; padding-right: 6.25px;">
              <div class="ant-box">
                <img class="box-img" src="@/assets/HELPLINE.png"/>
                <div class="box-content" style="padding: 24px 32px 48px">
                  <h1>热线支持</h1>
                  <p class="title">HELPLINE</p>
                  <p class="desc">为您提供工作日5*8小时热线服务，可以拨打0771-5897023获取支持。</p>
                  <div class="size-box__column"></div>
                  <div class="size-box__column"></div>
                  <div class="row" style="align-items: center">
                    <img width="30px" style="margin-right: 10px;" src="@/assets/phone.png" />
                    <span>电话咨询：0771-5897023</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="ant-col" style="padding-left: 6.25px; padding-right: 6.25px;">
              <div class="ant-box">
                <img class="box-img" src="@/assets/CHATBOT.png"/>
                <div class="box-content" style="padding: 24px 32px 48px">
                  <h1>智能服务</h1>
                  <p class="title">CHATBOT</p>
                  <p class="desc">为您提供实时的智能解答，可以与博学多才的智能客服机器人在线交流。</p>
                  <a disabled href rel="noopener noreferrer" target="_blank" class="ant-btn">
                    <span>敬请期待</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h3 class="title" style="padding: 0 0 48px 0">专项服务</h3>
        <div class="tabs">
          <div class="tabs-bar">
            <div
              class="tabs-pane"
              v-for="(tab, index) in tabs"
              :key="index"
              @click="handleTabChange(tab)"
            >
              <span :class="['tabs-pane__label', tab.active ? 'active' : '']">{{tab.label}}</span>
            </div>
          </div>
          <div class="tabs-view" :style="{backgroundImage: `url(${getTabsView})`}"></div>
        </div>
      </div>
    </div>
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px" @close="handleClose">
      <el-form :model="form" ref="form">
        <el-form-item label="留言类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="生产工艺" value="value2"></el-option>
            <el-option label="产品咨询" value="value3"></el-option>
            <el-option label="供需渠道合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.phone">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email">
          </el-input>
        </el-form-item>
        <el-form-item label="留言内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.content"
            ></el-input>
        </el-form-item>
          <el-form-item label="所在行业" :label-width="formLabelWidth">
            <el-select v-model="form.industry" style="width:380px">
              <el-option label="政府" value="value1"></el-option>
              <el-option label="教育" value="value2"></el-option>
              <el-option label="医疗" value="value3"></el-option>
              <el-option label="传媒" value="value4"></el-option>
              <el-option label="金融" value="value5"></el-option>
              <el-option label="互联网" value="value6"></el-option>
              <el-option label="IT" value="value7"></el-option>
              <el-option label="制造" value="value8"></el-option>
              <el-option label="能源" value="value9"></el-option>
              <el-option label="化工" value="value10"></el-option>
              <el-option label="汽车" value="value11"></el-option>
              <el-option label="物流" value="value12"></el-option>
              <el-option label="农业" value="value13"></el-option>
              <el-option label="建筑" value="value14"></el-option>
              <el-option label="服务" value="value15"></el-option>
              <el-option label="贸易" value="value16"></el-option>
              <el-option label="其他" value="value17"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- <div align="center">
          <el-button type="primary">提 交</el-button>
          <el-button>重 置</el-button>
        </div>                 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <el-row>
      <el-col :span="16" :offset="4">
        <div class="img_class2">
          <el-card class="card_box">
            <div align="center">
              <h1 style="font-weight:bold">留言板</h1>
            </div>
            <el-divider></el-divider>
            
          </el-card>
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>
<script>
 import { leaveWord } from '@/api/consult'

  export default {
    computed: {
      getTabsView () {
        for (var i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i].active) return this.tabs[i].img
        }
        return ''
      }
    },
    data() {
      return {
        formLabelWidth: '80px',
        dialogFormVisible: false,
        form: {
        type: '',
        content: '',
        name: '',
        phone: '',
        email: '',
        industry: '',
        },
        ruleForm: {
          name: '',
          email: '',
          leaveword:''
        },
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          leaveword: [
            {required: true, message: '请输入留言', trigger: 'blur'},
            {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
          ]
        },
        tabs: [
          {
            label: '上云前',
            active: true,
            img: require('@/assets/syq.png')
          },
          {
            label: '上云中',
            active: false,
            img: require('@/assets/syz.png')
          },
          {
            label: '上云后',
            active: false,
            img: require('@/assets/syh.png')
          },
          {
            label: '优化提升',
            active: false,
            img: require('@/assets/yzts.png')
          }
        ]
      };
    },
    methods: {
      showDialog () {
        this.dialogFormVisible = true
      },
      handleClose () {
        this.$refs.form.resetFields()
      },
       handleTabChange (tab) {
          this.tabs = this.tabs.map((item) => {
            return {
              ...item,
              active: tab.label === item.label
            }
          })
        },
      submitForm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            alert('submit!');
          } 
          else {
            console.log('error submit!!');
            return false;
          }
          // 发起请求
          console.log(this.form)
          leaveWord(this.form).then((res) => {
              if (res.success) {
                console.log('request success!!')
              } else {
                console.log('request error!!')
              }
          })
        });
      },
      resetForm(form) {
        this.$refs[form].resetFields();
        }
      }
    }
</script>

<style  scoped lang="less">
.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/banner_contact.png') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: white;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: white;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

  .main{
    background-color: #F4F5F9;
    .blank_class{
      height: 20px;
    }
    .card_box{
      // height: 400px;
      margin: 0px 0 20px 0;
    }
    .el-row{
      padding: 15px 0;
    }
    .wrap{
      width: 1200px;
    }
    .el-row{
      padding-top: 15px;
    }
    .header-h2{
      margin-top: 10px;
    }
  }
.title {
  font-size:25px;
  padding: 15px 15px 15px 0;
}
.model-main {
  width: 1200px;
  padding: 20px 0;
  margin: 0 auto;
  .wrapper{
    max-width: 1240px;
    margin: 0 auto;
    .ant-row{
      position: relative;
      height: auto;
      zoom: 1;
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      // display: block;
      box-sizing: border-box;
      .ant-row:before{
        display: table;
        content: "";
      }
      .ant-row:after{
        content: " ";
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .ant-col{
        display: block;
        box-sizing: border-box;
        width: 33.33333333%;
        -webkit-box-flex: 0;
        // flex: 0 0 auto;
        // float: left;
        .ant-box{
          cursor: pointer;
          width: 100%;
          height: 526px;
          background: #fff;
          box-shadow: 0 8px 16px 0 rgba(211,216,239,.4);
          position: relative;
          transition: all 0.4s;
          &:nth-child(3n) {
            margin-right: 0;
          }
          &:hover {
            transform: scale(1.02);
          }
          .box-img{
            width: 100%;
            vertical-align: middle;
            border-style: none;
          }
          .box-content{
            h1{
              font-size: 32px;
              line-height: 40px;
              margin-bottom: 6px;
            }
            .title{
              font-size: 8px;
              line-height: 22px;
              color: #697b8c;
              letter-spacing: 1px;
              padding: 0px;
            }
            .desc{
              font-size: 14px;
              color: #314659;
              line-height: 22px;
              margin-top: 20px;
            }
            .ant-btn{
              color: #a3b1bf;
              border: none;
              background-color: #f2f4f5;
              height: 38px;
              line-height: 38px;
              background: transparent;
              position: absolute;
              bottom: 47px;
              border-radius: 2px;
              span{
                pointer-events: none;
              }
            }
          }
        }
      }
    }
  }
  .model-title {
    display: flex;
    justify-content: space-between;
    .action {
      font-size: 14px;
      cursor: pointer;
    }
  }
  .card {
    .card-box {
      margin-bottom: 15px;
      line-height: 28px;
      box-shadow: inset 0px 0px 32px 0px ;
    }
  }
}

.tabs {
  width: 100%;
  height: 380px;
  display: flex;
  background-color: #fff;
  .tabs-bar {
    width: 240px;
    height: 100%;
    padding: 20px 0;
    .tabs-pane {
      cursor: pointer;
      .tabs-pane__label {
        position: relative;
        display: block;
        font-size: 16px;
        margin: 0 40px;
        padding: 35px 0;
        color: #314659;
        &.active {
          color: #2f54eb;
          font-weight: bold;
          font-size: 26px;
          &::before {
            content: '';
            position: absolute;
            width: 3px;
            height: 14px;
            top: 50%;
            left: -15px;
            transform: translateY(-50%);
            background-color: #2f54eb;
            border-radius: 5px;
          }
        }
      }
    }
  }
  .tabs-view {
    flex: 1;
    height: 100%;
    transition: all .4s;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>
